<template>
	<view :style="{ height: CustomBar + 'px' }">
		<view class="y-navbar" :style="{ height: CustomBar + 'px' }">
			<view class="status" :style="{ height: StatusBar + 'px' }"></view>
			<view class="content">
				<view class="back" :style="{ width: menuButtonInfo.width + 'rpx' }">
					<view class='tn-custom-nav-bar__back' @click="goBack">
						<text class='cuIcon-back_android'></text>
					</view>
				</view>
				<view class="title" :style="{ color: titleColor }">
					{{ title }}
				</view>
				<view class="flex justify-end" :style="{ width: menuButtonInfo.width + 'rpx' }">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	defineProps({
		title: {
			type: String,
			default: ''
		},
		titleColor: {
			type: String,
			default: '#333'
		}
	})
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	const system = uni.getSystemInfoSync()
	const StatusBar = system.statusBarHeight
	let custom = wx.getMenuButtonBoundingClientRect();
	let CustomBar = custom.bottom + custom.top - system.statusBarHeight;
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.y-navbar {
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 750rpx;
		z-index: 10;
		top: 0;

		.content {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.back {
				height: 60rpx;
			}

			/* 胶囊*/
			.tn-custom-nav-bar__back {
				width: 60%;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.15);
				border-radius: 1000rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.5);
				color: #FFFFFF;
				font-size: 18px;

				.icon {
					display: block;
					flex: 1;
					margin: auto;
					text-align: center;
				}

			}

			.title {
				flex: 1;
				text-align: center;
				font-weight: bold;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2D3341;
			}
		}
	}
</style>